<template>
  <div :id="`section-${name}`" class="ses-1" v-if="store.flag === 1">
    {{ name }}
  </div>
  <div class="neis-1">
    <el-card class="box-card" v-for="(item, index) in values" :key="index">
      <template #header>
        <div class="card-header">
          <span>{{ item.name }}</span>
          <el-button class="button" text @click="add(item)">></el-button>
        </div>
      </template>
      <div class="text">
        <div class="icon-1">
          <img :src="item.icon" v-if="item.icon" class="img-1" />
          <img src="../../../assets/head/t-1.png" v-else class="img-1" />
        </div>
        <div>
          <div class="ping-1">
            <el-rate
              @change="() => change(item.id, item.evaluationScore)"
              @update:model-value="
                (value: any) => (item.evaluationScore = value)
              "
              :model-value="Number(item.evaluationScore)"
              allow-half
            /><span>{{ item.evaluationNum }}人次</span>
          </div>
          <div class="shou-1">
            <div class="tu-1" @click="collec(item)">
              <img
                src="../../../assets/head/s-2.png"
                v-if="item.isCollection === '1'"
              />
              <img src="../../../assets/head/s-1.png" v-else />
            </div>
            <div>{{ item.collectionNum }}人已收藏</div>
          </div>
        </div>
      </div>
    </el-card>
  </div>

  <el-drawer v-model="drawer2" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass"></h4>
      <el-button type="danger" @click="close">
        关闭
        <el-icon class="el-icon--left"><Close /></el-icon>
      </el-button>
    </template>
    <template #default>
      <div><CardIndex :item="aobj"></CardIndex></div>
    </template>
  </el-drawer>
</template>

<script lang="ts" setup>
import CardIndex from './CardIndex.vue'
import { useUserStore } from '@/stores/modules/user'
import { saveAppComment, addCollect } from '@/services/Application'
import { ElMessage } from 'element-plus'
const store = useUserStore()
defineProps<{
  name?: string
  values?: Array<any>
}>()
interface AddksMethods {
  arr: Function
  getApps1: Function
}
const aobj = ref({})
const addsk = inject<AddksMethods>('addks')
const collec = async (item: any) => {
  try {
    if (item.isCollection === '0') {
      const res: any = await addCollect({
        appId: item.id,
        appIds: []
      })
      ElMessage.success('收藏成功')
      if (!addsk) return
      addsk.arr()
      addsk.getApps1()
    } else {
      const res: any = await addCollect({
        appId: item.id,
        appIds: []
      })
      ElMessage.success('取消收藏')
      if (!addsk) return
      addsk.arr()
      addsk.getApps1()
    }
  } catch (e) {
    ElMessage.error(`联系关里员`)
  }
}

const drawer2 = ref(false)
type sa = {
  appId: string
  fraction: string
}
const obj = ref<sa>({
  appId: '',
  fraction: ''
})
const change = async (id: string, score: number) => {
  obj.value.appId = id
  obj.value.fraction = score.toString()
  const res: any = await saveAppComment(obj.value)
  console.log(res)

  if (res.data) {
    ElMessage.success('评分成功')

    if (!addsk) return
    addsk.arr()
    addsk.getApps1()
  } else {
    ElMessage.error(`${res.msg}`)
    //清空临时评分
    obj.value.fraction = ''
    if (!addsk) return
    addsk.arr()
    addsk.getApps1()
  }
  // 你可以在这里进行例如 API 调用等进一步操作，来更新后台数据库中的评分
}
const add = (item: any) => {
  aobj.value = item

  drawer2.value = true
}
</script>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 30px;
  padding: 0 10px;
}
:deep() .el-card__header {
  padding: 5px;
}
.text {
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.icon-1 {
  width: 50px;
  height: 50px;
}
.img-1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ping-1 {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}
.shou-1 {
  display: flex;
  padding: 3px;
  box-sizing: border-box;
  .tu-1 {
    margin-top: 3px;
    margin-right: 3px;
    cursor: pointer;
  }
}
.box-card {
  width: 260px;
  height: 130px;
  margin: 10px;
  box-sizing: border-box;
}
.neis-1 {
  display: flex;
  flex-wrap: wrap;
}
:deep() .el-card__body {
  padding: 10px 20px;
  box-sizing: border-box;
}
.ses-1 {
  font-size: 20px;
  margin-bottom: 20px;
}
</style>
